<script setup lang='ts'>
import { ref,reactive,onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import DetailDialog from './ui/DetailDialog.vue'
import setUpTime from '@/utils/setUpTime'
import * as signalR from '@microsoft/signalr'
import { GetLatestCMSClazz } from '@/api/publicApi'

// 定义变量
// refs
const detailDialogRef = ref()
// 点击展示的某项
let showItem: any = reactive({})
// 表格
const tableData: any = ref([])

const cellStyle = {
  textAlign: 'center'
}

const headStyle = {
  textAlign: 'center'
}

// 分页
const pageInfo = ref({
  total: 100,
  pageSize: 10,
  pageNum: 1
})

// 定义函数
onMounted(() => {
  getElectricalInfoList()
  // getInclinomenterSignalRData()
})
// 获取列表数据
const getElectricalInfoList = () => {
  const params = {
    BarWheelMachineCode: localStorage.BarWheelMachineCode
      ? localStorage.BarWheelMachineCode
      : null
  }
  GetLatestCMSClazz(params).then(res => {
    tableData.value = []
    let Obj = res.result
    let time = setUpTime.formatTime(Obj.lastModificationTime)
    for (const item in Obj) { 
      if (item.includes('hyper')) {
        switch (item) {
        case 'hyperRotateElectricity':
          tableData.value.push({
            name: '回转电流',
            code: 'hyperRotateElectricity',
            lastModificationTime: time,
            value: Obj[item] + ' (A)',
            type: '( A)'
          })
          break
        case 'hyperRotateVoltage':
          tableData.value.push({
            name: '回转电压',
            code: 'hyperRotateVoltage',
            lastModificationTime: time,
            value: Obj[item] + ' (V)',
            type: ' (V)'
          })
          break
        case 'hyperCartElectricity':
          tableData.value.push({
            name: '大车电流',
            code: 'hyperCartElectricity',
            lastModificationTime: time,
            value: Obj[item] + ' (A)',
            type: ' (A)'
          })
          break
        case 'hyperCartVoltage':
          tableData.value.push({
            name: '大车电压',
            code: 'hyperCartVoltage',
            lastModificationTime: time,
            value: Obj[item] + ' (V)',
            type: ' (V)'
          })
          break
        case 'hyperBucket1Electricity':
          tableData.value.push({
            name: '斗轮-1电流',
            code: 'hyperBucket1Electricity',
            lastModificationTime: time,
            value: Obj[item] + ' (A)',
            type: ' (A)'
          })
          break
        case 'hyperBucket2Electricity':
          tableData.value.push({
            name: '斗轮-2电流',
            code: 'hyperBucket2Electricity',
            lastModificationTime: time,
            value: Obj[item] + ' (A)',
            type: ' (A)'
          })
          break
        case 'hyperCartRollVelocity':
          tableData.value.push({
            name: '大车转速',
            code: 'hyperCartRollVelocity',
            lastModificationTime: time,
            value: Obj[item] + ' (RPM)',
            type: ' (RPM)'
          })
          break
        case 'hyperRoatateVelocity':
          tableData.value.push({
            name: '回转速度',
            code: 'hyperRoatateVelocity',
            lastModificationTime: time,
            value: Obj[item],
            type: ' '
          })
          break
        case 'hyperBeltTensionTemper':
          tableData.value.push({
            name: '俯仰温度',
            code: 'hyperBeltTensionTemper',
            lastModificationTime: time,
            value: Obj[item] + ' (°)',
            type: ' (°)'
          })
          break
        case 'hyperOilLevel':
          tableData.value.push({
            name: '俯仰油位',
            code: 'hyperOilLevel',
            lastModificationTime: time,
            value: Obj[item],
            type: ' '
          })
          break
        // case 'hyperBeltTensionTemper':
        //   tableData.value.push({
        //     name: '俯仰压力',
        //     code: 'hyperBeltTensionTemper',
        //     lastModificationTime: time,
        //     value: Obj[item] + '',
        //     type: ' '
        //   })
        //   break
        // case 'hyperRotateElectricity':
        //   tableData.value.push({
        //     name: '皮带张紧液压站温度',
        //     code: 'hyperBeltTensionTemper',
        //     lastModificationTime: time,
        //     value: Obj[item] + '(°)',
        //     type: ' (°)'
        //   })
        //   break
        case 'hyperBeltTensionOilLevel':
          tableData.value.push({
            name: '皮带张紧液压站油位',
            code: 'hyperBeltTensionOilLevel',
            lastModificationTime: time,
            value: Obj[item],
            type: ' '
          })
          break
        }
      }
    }
     
    // tableData.value = [ ...res.result.items ]
    console.log('获取电气数据---->', tableData.value, res)
  }).catch((error:any) => {
    ElMessage({
      type: 'error',
      message: `${error.message}`
    })
  })
}

// 获取设备实时数据
const getInclinomenterSignalRData = () => {
  // 获取设备测点实时数据
  var connection = new signalR.HubConnectionBuilder()
    // .withUrl(`${ALL}/signalr`, {
    //   skipNegotiation: true,
    //   transport: signalR.HttpTransportType.WebSockets
    // })
    .build()
  connection.start()
  connection.on('updateMems', message => {
    let {
      LastModificationTime,
      DeviceCode,
      DeviceName,
      PositionDescription,
      ProgamException,
      ProgramMessage,
      XValue,
      YValue,
      BarWheelMachineCode
    } = JSON.parse(message)
    if (BarWheelMachineCode === localStorage.BarWheelMachineCode) {
      tableData.value.forEach(item => {
        if (item.deviceCode === DeviceCode) {
          (item.deviceName = DeviceName),
          (item.XValue = XValue),
          (item.YValue = YValue),
          (item.positionDescription = PositionDescription),
          (item.progamException = ProgamException),
          (item.programMessage = ProgramMessage),
          (item.lastModificationTime =
              setUpTime.formatTime(LastModificationTime))
        }
      })
    }
    // 按时间排序
    tableData.value.sort(function (a, b) {
      return b.creationTime < a.creationTime
    })
  })
  connection.onclose(() => setTimeout(() => {
    connection.start()
  }, 5000))
}

// 展示弹框
const showItemInfo = (row: any) => {
  console.log('点击的某项----》')
  showItem = {}
  showItem = { ...row }
  detailDialogRef.value.dialogVisible = true
}
</script>

<template>
  <div class="inclinometer-main-box">
    <div class="table-box">
      <el-table
        :cell-style="cellStyle"
        :header-cell-style="headStyle"
        :data="tableData"
        max-height="600"
        size="small"
      >
        <el-table-column
          prop="date"
          label="电气名称"
        >
          <template #default="scope">
            <div
              class="hover"
              @click="showItemInfo"
            >
              {{ scope.row.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="value"
          label="值"
        />
        <el-table-column
          prop="lastModificationTime"
          label="更新时间"
        />
      </el-table>
    </div>
    <!-- <div class="pagination-box">
      <el-pagination
        v-model:current-page="pageInfo.pageNum"
        v-model:page-size="pageInfo.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        @size-change="handlePlanSizeChange"
        @current-change="handlePlanCurrentChange"
      />
    </div> -->
    <DetailDialog
      ref="detailDialogRef"
      :show-item="showItem"
    />
  </div>
</template>

<style lang="scss" scoped>
.inclinometer-main-box {
  width: 100%;
  height: 100%;
  background-color: #fff;

  .table-box {
    padding: 0 15px;
    padding-top: 20px;

    .hover:hover {
      cursor: pointer;
    }
  }

  .pagination-box {
    margin-top: 10px;
  }
}
</style>